<template>
    <div>
    <div class="wrapper flex" @click="sendEvent(contactsData.event)">
            <div class="icon-wrapper center" :style="'background:'+contactsData.color">
                <svg class="icon" aria-hidden="true">
                <use :xlink:href="contactsData.icon"></use>
                </svg>
                <tip-badge badgeStyle='right: -.4rem;top: -.2rem;' v-if="contactsData.isTip">{{contactsData.count}}</tip-badge>
            </div>
           <div class="content">
               {{contactsData.name}}
             <div :class="{'line':line}"></div>    
            </div> 
    </div>
     <!-- <div class="wrapper flex" v-else @click="sendEvent(contactsData.event)">
     <van-image
            width="1.5rem"
            height="1.5rem"
            radius=".2rem"
            fit="cover"
            :src="contactsData.imageUrl"
            />
            <div class="content">
                {{contactsData.name}}
             <div class="line"></div>    
            </div>
            </div> -->
    </div>
</template>
<script>
import tipBadge from './tipBadge';
export default {
    props:{
        contactsData:Object,
        line:{
            type:Boolean,
            default:true
        }
    },
    components:{
        tipBadge
    },
    methods:{
        sendEvent(e){
            this.$emit('sendEvent',e)
        }
    }
}
</script>
<style scoped>
    .wrapper{
        padding: .3rem .2rem;
        background-color: #fff;
    }
    .wrapper:active{
        background-color: rgba(228,228,228,.5);
    }
    .content{
        position: relative;
        margin-left: .5rem;
        font-size: .6rem;
        line-height: 1.5rem;
    }
     .line{
    position: absolute;
    width: 13rem;
    height: 0;
    border-top: .05rem solid rgba(228,228,228,.5);
    bottom: -.2rem;
}
.icon-wrapper{
    position: relative;
    padding: .15rem .3rem;
    border-radius: .2rem;
}
.icon{
    color: #fff;
    font-size: .8rem;
}
</style>